<script lang='ts'  setup>
import { ref, reactive, defineProps, defineEmits } from 'vue'
//引入stores
import { useManagementStore } from '@/stores/menuManagement'

const ManagementStore = useManagementStore()
//图片的方法
// import { UploadFileInfo } from 'naive-ui'

// import { FormInst, FormItemRule, useMessage } from 'naive-ui'
// 图片上传的
// const showModalRef = ref(false)
// const previewImageUrlRef = ref('')
// function handlePreview(file: UploadFileInfo) {
//   const { url } = file
//   previewImageUrlRef.value = url as string
//   showModalRef.value = true
// }






// 表单的
const formRef = ref(null)
const Frommodel = reactive({
  name: '',
  classify: '',
  desc: '',
  price: '',
  measure: '',
  recommend: '',
  picture: 'app.png'
})
const generalOptions = ['西红柿', '西瓜', '菜'].map(
  (v) => ({
    label: v,
    value: v
  })
)
//表单验证
const rules = {
  name: {
    required: true,
    trigger: ['blur', 'input'],
    message: '请输入请输入菜品名称'
  },
  classify: {
    required: true,
    trigger: ['blur', 'input'],
    message: '请选择分类'
  },
  desc: {
    required: true,
    trigger: ['blur', 'input'],
    message: '请输入菜品介绍'
  },
  price: {
    required: true,
    trigger: ['blur', 'input'],
    message: '菜品售价不能为空'
  },
  measure: {
    required: true,
    trigger: ['blur', 'input'],
    message: '请输入计量单位'
  },
  recommend: {
    required: true,
    trigger: ['blur', 'input'],
    message: '请选择商品推荐'
  },
  picture: {
    required: true,
    trigger: ['blur', 'input'],
    message: '请上传图片'
  },
}
//提交
const props = defineProps({
  isFrom: {
    type: Boolean
  }
})
const emits = defineEmits(['update:isFrom'])
const SubmitDishes = (e: MouseEvent) => {
  e.preventDefault()
  formRef.value?.validate(async (errors: any) => {
    if (!errors) {
      await ManagementStore.newly(Frommodel)
      emits('update:isFrom', false)
      await ManagementStore.getList()
    }
  })
}
</script>

<template>
  <n-form ref="formRef" :model="Frommodel" :rules="rules" label-placement="left" label-width="auto"
    require-mark-placement="right-hanging" id="formRef">
    <n-form-item label="菜名名称" path="name">
      <n-input v-model:value="Frommodel.name" placeholder="请输入菜品名称" />
    </n-form-item>
    <n-form-item label="菜名分类" path="classify">
      <n-select v-model:value="Frommodel.classify" placeholder="选择分类" :options="generalOptions" />
    </n-form-item>

    <n-form-item label="菜品介绍" path="desc">
      <n-input v-model:value="Frommodel.desc" placeholder="请输入内容" type="textarea" :autosize="{
        minRows: 3,
        maxRows: 5
      }" />
    </n-form-item>

    <n-form-item label="菜品售价" path="price">
      <n-input v-model:value="Frommodel.price" placeholder="元" />
    </n-form-item>


    <n-form-item label="计量单位" path="measure">
      <n-input v-model:value="Frommodel.measure" placeholder="计量单位" />
    </n-form-item>


    <n-form-item label="商品推荐" path="recommend">
      <n-radio-group v-model:value="Frommodel.recommend" name="radiogroup1">
        <n-space>
          <n-radio value="0">
            新品
          </n-radio>
          <n-radio value="1">
            推荐
          </n-radio>
        </n-space>
      </n-radio-group>
    </n-form-item>
    <!-- <n-form-item label="图片上传" path="picture">
      <n-upload action="https://www.mocky.io/v2/5e4bafc63100007100d8b70f" :default-file-list="fileList"
        list-type="image-card">
        点击上传
      </n-upload>
      <n-divider />
      <n-upload action="https://www.mocky.io/v2/5e4bafc63100007100d8b70f" :default-file-list="previewFileList"
        list-type="image-card" @preview="handlePreview" />
      <n-modal v-model:show="showModal" preset="card" style="width: 600px" title="一张很酷的图片">
        <img :src="previewImageUrl" style="width: 100%">
      </n-modal>
    </n-form-item> -->


    <div class="foot-btn">
      <n-button type="primary" @click="SubmitDishes">
        完成,提交菜品
      </n-button>
    </div>
  </n-form>
</template>

<style scoped>
#formRef {
  max-width: 650px;
  margin: 0 auto;
}

.foot-btn {
  display: flex;
  align-content: center;
  justify-content: center;
}
</style>